<template>
    <div class="purchase-container">
        <div class="product-content">
            <a-card class="product-card">
                <div class="product-image">
                    <a-image :src="product.prodPicture" alt="商品图片" />
                </div>
                <div class="product-info">
                    <h2 class="product-name">{{ product.prodName }}</h2>
                    <p class="product-price">价格: ¥{{ product.prodPrice.toFixed(2) }}</p>
                    <p class="product-stock">库存: {{ product.prodCount }} 件</p>
                </div>
            </a-card>
        </div>

        <div class="merchant-info">
            <a-card class="merchant-card">
                <a-avatar :src="business.avatar" size="large" />
                <div class="merchant-details">
                    <h3 class="merchant-name">{{ business.busName }}</h3>
                    <p class="merchant-bio">{{ business.busCaption }}</p>
                </div>
            </a-card>
        </div>

        <div class="product-description">
            <a-card class="description-card">
                <h3>商品描述</h3>
                <p>{{ product.prodCaption }}</p>
            </a-card>
        </div>

        <footer class="footer">
            <div class="order-info">
                <a-input-number v-model:value="quantity" min="1" :max="product.prodCount" />
                <p class="total-price">总价格: ¥{{ (quantity * product.prodPrice).toFixed(2) }}</p>
                <a-button type="primary" @click="confirmOrder">确认订单</a-button>
            </div>
        </footer>
    </div>
</template>

<script>
import { onBeforeMount, onMounted, ref } from 'vue';
import { Avatar, Button, InputNumber, Image, Card } from 'ant-design-vue';
import { useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import request from '../../../util/request';
import defalutImage from '../../../assets/default.jpg';

export default {
    name: 'CusPurchase',
    components: {
        'a-avatar': Avatar,
        'a-button': Button,
        'a-input-number': InputNumber,
        'a-image': Image,
        'a-card': Card,
    },
    setup() {
        const route = useRoute();
        const productId = route.query.productId;

        const product = ref({
            id: 0, 
            prodPicture: null, 
            prodName: '',
            busId: 0,
            prodPrice: 0,
            prodCount: 0,
            prodCaption: '',
        });

        const business = ref({
            avatar: '', // 商家头像路径
            busName: '商家姓名',
            busCaption: '商家的个人简介。',
        });

        const quantity = ref(1);

        onBeforeMount(() => {
            request.post('/product/get', {
                    prodid: productId
                }).then(res => {
                    product.value = res.data.product;
                    business.value = res.data.business;
                    if(product.value.prodPicture === null) {
                        product.value.prodPicture = defalutImage;
                    }
                }).catch(err => {
                    message.error("获取商品信息失败：", err);
                }
            );
        });

        const confirmOrder = () => {
            // console.log('确认订单:', {
            //     product: product.value.name,
            //     quantity: quantity.value,
            //     totalPrice: (quantity.value * product.value.price).toFixed(2),
            // });
            // 这里可以添加订单确认的 API 调用逻辑
            request.post('/product/buy', {
                prodid: product.value.id,
                cusid: sessionStorage.getItem('userid'),
                prodcount: quantity.value,
            }).then(res => {
                if (res.data.flag === 'success') {
                    message.success('购买成功！');
                } else {
                    message.error('购买失败！请稍后重试或者联系管理员');
                }
            }).catch(err => {
                message.error("购买失败：", err);
            });
        };

        return {
            product,
            business,
            quantity,
            confirmOrder,
        };
    },
};
</script>

<style src="../../../assets/styles/cusPurchase.css" scoped>
</style>
